<template>
    <div class="hycltable">
        <el-table
                :data="hyclData"
                border
                class="tb-edit"
                :row-class-name="rowClassName"
                :cell-class-name="cellClassName"
                @row-click="rowClick"
                @cell-click="cellClick"
                highlight-current-row
                style="width: 100%">
            <el-table-column
                    :align="column.columnIndex>0?'right':'left'"
                    :fixed="i==0?true:false"
                    v-for="(column,i) in columnNameList"
                    :index="column.columnIndex"
                    :prop="column.propName"
                    :label="column.name">


            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click.native="handleClick(scope.row)" type="text" size="small">填报</el-button>
                    <el-button @click.native="changeItem(scope.row)" type="text" size="small">替换</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="isChanged"
             style="background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; bottom: 0; position: fixed; z-index: 99999;">
            <div @click.stop="isChanged=!isChanged"
                 style="background-color: rgba(255,255,255,0.3); width: 100%;height: 75%; bottom: 25%;">
            </div>
            <mt-picker style="background-color: white; width: 100%; height: 25%;bottom: 0; position: absolute;"
                       :slots="slots"
                       @change="onValuesChange"></mt-picker>
        </div>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    export default {

        data() {
            return {
                isChanged: false,
                columnNameList: [
                    {name: '车牌号码', propName: 'cldcb2019001',columnIndex:0},
                    {name: '车辆颜色', propName: 'cldcb2019002',columnIndex:1},
                    // 删除车辆类型、燃料类型、主要货物种类 add by qzn 20190627 
                    // {name: '车辆类型', propName: 'cldcb20190017',columnIndex:2},
                    // {name: '燃料类型', propName: 'cldcb20190011',columnIndex:3},
                    // {name: '主要货物种类', propName: 'cldcb20190013',columnIndex:4},
                ],
                slots: [
                    {
                        flex: 1,
                        values: ['京A5811', '京A5812', '京A5813', '京A5814'],
                        className: 'slot1',
                        textAlign: 'center'
                    }
                ],
                hyclData: [],
                rowClass: 'rowClass',
                rowIndex: -1,
                columnIndex: -1,
                rowIndexBack: [],
                recid: this.$route.query.id,
            }
        },
        props: ['parentmsg'],
        watch: {
            parentmsg(newVal) {
                if (newVal === "hycl") {
                    this.startTime();
                } else {
                    this.closeTime();
                }
            }
        },
        created() {
            //this.getDatas();
        },
        mounted() {
            this.getDatas();
        },
        methods: {
            changeItem(row) {
                let reportedByOther = localStorage.getItem("clReportedByOther");
                let samplestatus = localStorage.getItem("clSamplestatus");
                let information = localStorage.getItem("clInformation");

                if(information == "业户" &&reportedByOther == "0" && samplestatus == "未审定"){
                    Toast("此业户已上报，不能进行操作！");
                } else if(information == "业户" &&reportedByOther == "1"){
                     Toast("此业户被代报，不能进行操作！");
                } else if(information == "调查员"  &&reportedByOther == "0"){
                    Toast("此业户未被代报，不能进行操作！");
                } else if(information == "调查员"  &&reportedByOther == "1"&&samplestatus == "已上报"){
                    Toast("此业户已上报，不能进行操作！");
                } else {
                        this.$router.push({
                            path: '/yhInfo/hycl/hyclList',
                            query: {
                                row: JSON.stringify(row),
                                id: this.recid
                            }
                        });                   
                }                
            },
            onValuesChange(picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            sendMsg() {
                this.$emit('func', this.startTime())
            },
            setRowClass(rowIndexs) {
                for (let i in rowIndexs) {
                    let rowIndex = rowIndexs[i];
                    let row = eval(rowIndex);
                    this.rowIndexBack.push(row - 1);
                }
            },
            cellClassName({row, column, rowIndex, columnIndex}) {
                //把每一行的索引放进row
                if (rowIndex == this.rowIndex && columnIndex == this.columnIndex) {
                    console.log("rowSelectClass");
                    return 'rowSelectClass';
                }
                if (this.rowIndexBack.indexOf(rowIndex) !== -1) {
                    return 'flag-row';
                }
            },
            rowClassName({row, rowIndex}) {
                //把每一行的索引放进row
                row.rowIndex = rowIndex;
            },
            rowClick(row) {
                this.rowIndex = row.rowIndex
            },
            cellClick(row, column, cell, event) {
                this.rowIndex = row.rowIndex;
                this.columnIndex = column.index;
            },
            handleClick(row) {
                let reportedByOther = localStorage.getItem("clReportedByOther");
                let samplestatus = localStorage.getItem("clSamplestatus");
                let information = localStorage.getItem("clInformation");

                if(information == "业户" &&reportedByOther == "0" && samplestatus == "未审定"){
                    Toast("此业户已上报，不能进行操作！");
                } else if(information == "业户" &&reportedByOther == "1"){
                     Toast("此业户被代报，不能进行操作！");
                } else if(information == "调查员"  &&reportedByOther == "0"){
                    Toast("此业户未被代报，不能进行操作！");
                } else if(information == "调查员"  &&reportedByOther == "1"&&samplestatus == "已上报"){
                    Toast("此业户已上报，不能进行操作！");
                } else {                        
                    this.$router.push({
                            path: '/yhInfo/hycl/hyclTB',
                            query: {
                                row: JSON.stringify(row),
                                id: this.recid
                            }
                        });                
                }
            },

            getDatas() {
                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/getCarInfo', {
                    'data': {
                        "recid": this.$route.query.id
                    }
                }, {
                    'headers': {
                        'Content-Type': 'application/json',
                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                    }
                }).then(result => {
                    console.log("车辆表获取数据:"+JSON.stringify(result));
                        if (result.data.status == "1000") {
                            this.hyclData = result.data.data.cldcb2019CpList;
                            localStorage.setItem('hyclData', JSON.stringify(this.hyclData));
                            console.log(JSON.stringify(this.hyclData));
                            if(this.hyclData.length > 0){
                                for(let i=0;i<this.hyclData.length;i++){
                                    this.hyclData[i].cldcb2019002 = this.getCarColorName(this.hyclData[i].cldcb2019002);
                                }
                            }                            
                        }
                        //console.log("车辆表获取数据"+JSON.stringify(result));
                    }, error => {
                        console.log("getCarInfo request error:" + error);
                    }
                );

                // if (JSON.parse(localStorage.getItem('hyclData')) === null) {
                //     console.log(null);
                // } else {
                //     this.hyclData = JSON.parse(localStorage.getItem('hyclData'));
                // }
            },
            // saveData() {
            //     let data = {};
            //     data.recid = this.recid;
            //     data.carList = this.hyclData;
            //     this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/saveCarsList', {'data': data}, {
            //         'headers': {
            //             'Content-Type': 'application/json',
            //             'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
            //         }
            //     }).then(result => {
            //         if (result.data.status == "1000") {
            //             //localStorage.setItem('hyclData', JSON.stringify(this.hyclData));
            //             console.log("保存成功");
            //             console.log(result)
            //         }
            //         this.goback();
            //     }, error => {
            //         console.log("getyhcars request error:" + error);
            //     });
            // },
            startTime() {
                // this.$store.state.hyclitervalId = setInterval(() => {
                    //localStorage.setItem('hyclData', JSON.stringify(this.hyclData));
                // }, 5000)
                console.log("hyclSuccess");
            },
            closeTime() {
                console.log("hyclcloseTime");

                // clearInterval(this.$store.state.hyclitervalId);
            },
            // 获取车牌颜色名称
                getCarColorName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name = code;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
        }
    }
</script>

<style lang="scss">
    .rowClass {
        background: #FFFFFF;
    }

    .hycltable {
        overflow-y: scroll;
        overflow-x: scroll;
        .mui-table-view-cell.mui-active {
            background-color: rgb(48, 186, 250);
        }
        .tb-edit .el-input {
            display: none
        }
        .tb-edit .current-row .el-input {
            display: block
        }
        .tb-edit .current-row .el-input + span {
            display: none
        }
        .login-form-input .el-input__inner {
            border: 0 none;
            border-bottom: 0;
            border-radius: 0px;
        }
        .el-table--enable-row-hover .el-table__body tr:hover > td {
            background-color: #ffffff; //hover行背景色
        }
        .el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
        .el-table__body tr.current-row > td,
        .el-table__body tr.hover-row.current-row > td,
        .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
        .el-table__body tr.hover-row.el-table__row--striped > td,
        .el-table__body tr.hover-row > td {
            background-color: transparent; //行选中的背景色
        }
    }

    .rowSelectClass {
        background-color: #0000FF;
    }

    .el-table .flag-row {
        background: #f0f9eb;
    }

    // 使车辆颜色一列字体居中 add by qzn 20190627 start
    .el-table th>.cell {
    text-align: center;
    }
    .el-table .cell {
    text-align: center;
    }
    // 使车辆颜色一列字体居中 add by qzn 20190627 end
    

</style>